<template>
  <div>
    <vxe-modal
        v-model="show" id="add" width="50%" height="80vh" :size="formSize" :position="{top: '10%'}"
        @close="closeForm()" @show="open" show-zoom reformSize transfer show-footer destroy-on-close>
      <!-- storage 将窗口拖动的状态保存到本地 remember 再次打开窗口时还原窗口状态-->
      <!--标题-->
      <template #title>
        <span style="font-weight: bold;">个人信息</span>
      </template>
      <!--主体-->
      <template #default>
        <el-form label-position="left" :size="formSize" ref="form" :model="form" class="form" :rules="rules" label-width="100px">
          <!-- 用户名 -->
          <el-form-item label="用户名" prop="username">
            <el-input :size="formSize" v-model="form.username" autoComplete="off" clearable  placeholder="请输入用户名">
            </el-input>
          </el-form-item>
          <!-- 头像 -->
          <el-form-item label="头像" prop="headimg">
            <ImagesUpload uploadType="2" :size="formSize" fileType="image" :image.sync="form.headimg"></ImagesUpload>
          </el-form-item>
          <!-- 用户姓名 -->
          <el-form-item label="用户姓名" prop="realname">
            <el-input v-model="form.realname" autoComplete="off" clearable  placeholder="请输入用户姓名">
            </el-input>
          </el-form-item>
          <!-- 邮箱 -->
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" autoComplete="off" clearable  placeholder="请输入邮箱">
            </el-input>
          </el-form-item>
          <!-- 手机号 -->
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="form.mobile" autoComplete="off" clearable  placeholder="请输入手机号">
            </el-input>
          </el-form-item>
          <!-- 备注 -->
          <el-form-item label="备注" prop="note">
            <el-input v-model="form.note" autoComplete="off" clearable  placeholder="请输入备注">
            </el-input>
          </el-form-item>
          <!-- 所属角色 -->
          <el-form-item label="所属角色" prop="type">
            <span v-for="(item,i) in role_ids" :key="i" v-if="form.role_id == item.value">{{item.label}}</span>
          </el-form-item>
          <!-- 所属部门 -->
          <el-form-item label="所属部门" prop="type">
            <span v-for="(item,i) in dept_ids" :key="i" v-if="form.dept_id == item.value">{{item.label}}</span>
          </el-form-item>
          <!-- 数据权限 -->
          <el-form-item label="数据权限" prop="type">
            <span v-if="form.permission == 1">全部数据权限</span>
            <span v-if="form.permission == 2">本部门及以下数据权限</span>
            <span v-if="form.permission == 3">本部门数据权限</span>
            <span v-if="form.permission == 4">本人数据权限</span>
            <span v-if="form.permission == 5">无数据权限</span>
          </el-form-item>
        </el-form>
      </template>
      <!--底部-->
      <template #footer>
        <el-button :size="formSize" :loading="loading" type="primary" @click="submit">
          <span v-if="!loading">确 定</span><span v-else>提 交 中...</span>
        </el-button>
        <el-button :size="formSize" @click="closeForm">取 消</el-button>
      </template>
    </vxe-modal>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import { update, getUpdateInfo, getFieldList } from '@/api/admin/admin/user'
import ImagesUpload from '@/components/common/ImagesUpload.vue'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name:'admin_userupdate',
  components: {
    ImagesUpload,
    Treeselect,
  },
  computed: {
    ...mapGetters(['userinfo','formSize']),
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return {
      form: {
        username:'',
        realname:'',
        headimg:'',
        email:'',
        mobile:'',
        role_id:1,
        dept_id:'1',
        permission:1,
        note:'',
        status:1,
        update_time:'',
      },
      role_ids:[],
      dept_ids:[],
      loading:false,
      activeName:'basicInfo',
      rules: {
        email:[
          {pattern:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: '邮箱格式错误'}
        ],
        mobile:[
          {pattern:/^1[3456789]\d{9}$/, message: '手机号格式错误'}
        ],
      }
    }
  },
  watch:{
    show(value){
      if(value){
        getFieldList().then(res => {
          if(res.status == 200){
            this.role_ids = res.data.role_ids
            this.dept_ids = res.data.dept_ids
          }
        })
      }
    }
  },
  mounted() {

  },
  methods: {
    open(){
      getUpdateInfo({user_id:this.userinfo.user_id}).then(res => {
        if(res.status == 200){
          this.form = res.data
          this.form.update_time = this.$XEUtils.toDateString(this.form.update_time * 1000)
        }
      })
    },
    submit(){
      this.$refs['form'].validate(valid => {
        if(valid) {
          this.loading = true
          update(this.form).then(res => {
            if(res.status == 200){
              this.$message({message: '操作成功', type: 'success'})
              this.$emit('refesh_list')
              this.closeForm()
            }
          }).catch(()=>{
            this.loading = false
          })
        }
      })
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.value,
        label: node.label,
        children: node.children
      }
    },
    closeForm(){
      this.$emit('update:show', false)
      this.loading = false
      if (this.$refs['form']!==undefined) {
        this.$refs['form'].resetFields()
      }
    },
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/common.scss';
</style>
